<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <div v-for="item in list" :key="item.id" class="row">
            <div class="total">
                <div class="time">下单时间：{{ item.createTime }}</div>
                <div class="name">{{ item.station.name }}({{ item.station.concat }})</div>
                <div class="button">
                    <div class="fee">￥{{ item.fee.toFixed(2) }}</div>
                    <van-button type="danger" size="small" @click="confirmOrder(item)">确认提货</van-button>
                </div>
                <div class="address">￥{{ item.station.address }}</div>
            </div>
           
            <van-card v-for="cart in item.list" :key="cart.id" :price="cart.goods.price" :desc="cart.goods.text"
                :title="cart.goods.name" :thumb="cart.goods.image" :num="cart.cont" :origin-price="cart.goods.originPrice">
                <template #tags>
                    <van-tag plain type="primary">酒水</van-tag>
                </template>
            </van-card>
        </div>
    </van-list>
    <div style="height: 200px;"></div>
</template>
  
<script>
import axios from 'axios';
import { showDialog } from 'vant'; // 引入弹窗的方法
export default {
    data() {
        return {
            loading: false, // 是否是加载状态
            finished: false, // 列表是否加载完成
            pageNo: 0, // 页数
            pageSize: 20, // 页距，指每页有多少个
            list: [], // 商品列表
        }
    },
    created() {
        this.getList();
        this.$store.state.$bus.on('refreshOrderList', this.refreshList)
    },
    methods: {
        // 获取列表
        async getList() {
            this.loading = true; // 开始拉取数据的时候开始转圈
            const res = await axios.post('http://localhost:6001/list/order', {
                // $timeout: 1000, // 模拟延时，3秒后返回
                pageNo: this.pageNo,
                paseSize: this.pageSize,
                search: { state: null }
            });
            this.pageNo++; // 拉取了第一个页的数据后，就应该拉取第二页
            const data = res.data.result.list;
            // console.log(data);
            // console.log('=================data', data);
            // 将拉取的数据追加到原来的数据的后面
            // 使用map和...可以给一个列表的每一项增加属性
            this.list = [...this.list, ...data.map(o => ({ ...o, count: 1 }))];
            if (data.length < this.pageSize) { // 说明已经拉取完成
                this.finished = true;
            }
            this.loading = false; // 拉取数据完成关闭转圈
        },
        refreshList() {
            this.list = []
            this.pageNo = 0
            this.getList()
        },
        async confirmOrder(item) {
            const params = {
                id: item.id,
                state: 'finish'
            }
            const res = await axios.post('http://localhost:6001/modify/order', params)
            const data = res.data
            if (!data.success) {
                showDialog({ message: data.message })
            } else {
                showDialog({ message: '提货成功' })
                // 刷新列表
                this.refreshList()
      this.$store.state.$bus.emit('refreshHistoryList')
                
            }

        },
    }
}
</script>
  
<style scoped>
.row {
    margin-bottom: 10px;
    border-bottom: 10px solid #E7E7E7;
}

.total {
    background-color: #E7E7E7;
    padding: 20px 10px;
}

.time {
    font-size: 12px;
    color: gray;
    margin-bottom: 6px;
}

.name {
    font-size: 16px;
    margin-bottom: 6px;
}

.fee {
    font-size: 22px;
    color: red;
    font-weight: 800;
    margin-bottom: 6px;
}

.address {
    font-size: 12px;
    color: gray;
}

.button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>